<style scoped>
    .quill-editor {
        height:400px ;
    }
    .pad20{
        padding: 20px;
    }
</style>
<template>
    <div>
        <product-title></product-title>
        <div class="pad20">
            <Form :labelWidth="120" :rules="ruleValidate" ref="formItem" :model="formItem">
                <Row>
                    <i-col :xs="24" :sm="24" :md="24" :lg="8">
                        <FormItem label="产品名称" prop="id">
                            <Select v-model="formItem.pid" :disabled="canchange">
                                    <Option :value="formItem.pid" :key="formItem.pid">{{formItem.pname}}</Option>
                            </Select>
                        </FormItem>
                    </i-col>
                </Row>
                <Row>
                    <i-col :xs="24" :sm="24" :md="24" :lg="8">
                        <FormItem label="保险责任名称" prop="name">
                            <i-input placeholder="保险责任名称" v-model="formItem.name"></i-input>
                        </FormItem>
                    </i-col>
                </Row>
                <Row>
                    <i-col :xs="24" :sm="24" :md="24" :lg="8" >
                        <FormItem label="内容" prop="content">
                            <!--<UE :defaultMsg="formItem.content" ref="ue" id="ue"></UE>-->
                            <Input  v-model="formItem.content" type="textarea" :rows="8" placeholder="请输入"  ></Input>
                        </FormItem>
                    </i-col>
                </Row>
                <Row>
                    <i-col :xs="4" :sm="4" :md="2" :lg="2">
                        <FormItem>
                            <Button @click="handleSubmit('formItem')" type="primary">提交</Button>
                        </FormItem>
                    </i-col>
                    <i-col :xs="4" :sm="4" :md="2" :lg="2">
                        <FormItem>
                            <Button @click="back()" type="">取消</Button>
                        </FormItem>
                    </i-col>
                </Row>
            </Form>
        </div>
    </div>
</template>

<script>
    import productTitle from '../../components/productTitle';
    import 'quill/dist/quill.core.css'
    import 'quill/dist/quill.snow.css'
    import 'quill/dist/quill.bubble.css'
    import { quillEditor } from 'vue-quill-editor'
    import {update_duty,detaill_duty } from '../../api/product_v2.js'
    import UE from '../UE/ue.vue';
    import '../../../static/UEdit/ueditor.config.js';
    import '../../../static/UEdit/ueditor.all.js';
    import '../../../static/UEdit/lang/zh-cn/zh-cn.js';
    import '../../../static/UEdit/ueditor.parse.js';
    export default {
        data() {
            return {
                formItem:{
                    id:'',
                    name:'',
                    content:'',
                    pid:'',
                    pname:''
                },
                all_list:[],
                ruleValidate:{
                    name: [
                        { required: true, message: '名字不能为空'}
                    ],
                    id: [
                        { required: true, message: '不能为空'}
                    ],
                    content: [
                        { required: true, message: '内容不能为空'}
                    ]
                },
                canchange:false,
            }

        },
        components:{
            productTitle,
            UE
        },
        created(){
            this.get_detail();
            this.formItem.id = this.$route.params.id;
        },
        methods:{
            getUEContent() {
                this.formItem.content = this.$refs.ue.getUEContent();
            },
            list(){
                    if(!this.$route.params.id){
                        new Promise((rev,rej)=>{
                            get_all_pro().then(res=>{
                                if(res.data.err==0){
                                    this.all_list = res.data.data.list;
                                }else{
                                    this.$Message.error(res.data.info)
                                }
                                rev()
                            }).catch(error=>{
                                rej(error)
                            })
                        })
                    }else{
                        this.canchange=true;
                    }

            },
            get_detail(){
                this.canchange=true;
                let params={
                    id:this.$route.params.id,
                }
                new Promise((rev,rej)=>{
                    detaill_duty(params).then(res=>{
                        if(res.data.err==0){
                            this.formItem = res.data.data;
//                            this.$refs.content.setUEContent(this.formItem.content)
                        }else{
                            this.$Message.error(res.data.info)
                        }
                        rev()

                    }).catch(error=>{
                        rej(error)
                    })
                })
            },
            handleSubmit(name){
                this.$refs[name].validate((valid) => {
                    if (valid) {
                            new Promise((rev, rej) => {
                                //更换接口即可
                                update_duty(this.formItem).then(res => {
                                    if (res.data.err == 0) {
                                        this.$router.push({name: 'duty_list'})
                                    } else {
                                        this.$Message.error(res.data.info)
                                    }
                                })
                                rev()
                            }).catch(error => {
                                rej(error)
                            })

                    } else {
                        this.$Message.error('参数出错!');
                    }
                })
            },
            back(){
                this.$router.push({name: 'duty_list'});
            }
        }

    }
</script>


